<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取数据展示</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>

</head>
<body>
<!--
         1、Vue 中的单词写错了
                data ===>date
                methods ===>method

         2、axios 的请求的url写错了   data.json

         3、控制台拿到了数据
                 console.log(resp.data);  Vue 中的data是否有数据?
                 需要把
                    网络请求的数据给到 this.users = resp.data

         4、html标签写错了

         5、插值表达式中的  单词写错了
-->
<div id="app">
    <table border="1" cellspacing="0">
        <tr>
            <td>姓名</td>
            <td>电话</td>
            <td>备注</td>
        </tr>
        <tr v-for="(user,index) in users">
            <td>{{user.name}}</td>
            <td>{{user.tel}}</td>
            <td>{{user.remark}}</td>
        </tr>
    </table>
   <button @click="getData">点我获取数据</button>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            users:[]
        },
        methods:{
            getData(){
                axios.get('data.json').then(resp=>{
                    //获取请求的数据 
                    console.log(resp.data);
                    this.users = resp.data;
                })
            }
        }
    })

</script>
</body>
</html>